<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 29.点击button， 创建一个表单 包含 （文本输入框，下拉选择框，单选按钮，多选按钮，重置按钮、提交按钮） -->

    <span style="color:red;">29. 创建一个表单:</span><br/><br/>
    <button id="form_btn">创建表单</button>
    <form action="http://www.baidu.com" style="width: 400px; height: 300px; border:1px solid #000; margin:auto; margin-top:10px" id="form_tile"><br/>
        
        文本输入框 <input type="text"><br/><br/>
        下拉选择框 <select name="" id=""><br/><br/>
            <option value="111">111</option>
            <option value="222">222</option>
            <option value="333">333</option>
        </select><br/><br/>
        单选按钮 <input type="radio"><br/><br/>
        多选按钮 <input type="checkbox"><br/><br/>
        重置按钮 <input type="reset"><br/><br/>
        提交按钮 <input type="submit"><br/><br/>

    </form>
<div id="div1"></div>
</body>
<script>
    $("#form_btn").click(function(){
        var form_html = ""
        for(let i=0;i<1;i++){
            form_html+=
            `
            <form action="http://www.baidu.com" style="width: 400px; height: 300px; border:1px solid #000; margin:auto; margin-top:10px" id="form_tile"><br/>
    
    文本输入框 <input type="text"><br/><br/>
    下拉选择框 <select name="" id=""><br/><br/>
        <option value="111">111</option>
        <option value="222">222</option>
        <option value="333">333</option>
    </select><br/><br/>
    单选按钮 <input type="radio"><br/><br/>
    多选按钮 <input type="checkbox"><br/><br/>
    重置按钮 <input type="reset"><br/><br/>
    提交按钮 <input type="submit"><br/><br/>

  </form>
            `
        }
        $("#div1").append($(form_html))
      
     })
</script>
</html>